$color-red: #dd524d;
$color-pink: #f441a5;
$color-ored: #f05853;
$color-ored-light: #dd524d;
$color-yellow: #ffeb3b;
$color-yellow-light: rgba(255,235,59,0.7);
$color-blue: #09a8f4;
$color-blue-light: rgba(9,168,244,0.7);
$color-green: #07c160;
$color-green-light: rgba(9,168,244,0.7);
$color-modal: rgba(249,249,249,0.75);
$color-glass: rgba(160,160,160,0.75);

.main{
	width: 100%;height: 100%;
	background-color: rgb(249,249,249);
	background-image: url("");
	background-size: 100% 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;  /*关键*/
	background-position: center;
	top:0;
	left: 0;
	zoom:1;
	.title{
		width: 100%;height: 68px;
		padding: 0 20px;
		padding-top: 35px;
		font-weight: 900;
		color: #555;
	}
	// luckdog
	.lucky{
		display: block;
		width: 100%;height: 100%;
		.picker-bar{
			width: 100%;
			text-align: center;
			font-size: 18px;
			color: $color-green;
			font-weight: 900;
			text-shadow: 1px 1px 1px #999;
		}
		.picker{
			width: auto;
			margin: 10px;
			margin-top: 15px;
			padding: 10px 5px;
			border-radius: 10px;
			background-color: $color-glass;
			.btn{
				display: block;
				text-align: center;
				padding-bottom: 10px;
				font-size: 18px;
				color: $color-red;
				font-weight: 900;
				text-shadow: 1px 1px 1px #999;
			}
			.spool{
				.red,.blue{
					width: 35px;height: 35px;
					display: inline-block;
					margin: 3px;
					padding: 8px;
					box-sizing: border-box;
					text-align: center;
					background-color: #eee;
					color: $color-red;
					border-radius: 50%;
				}
				.blue{
					color: $color-blue;
				}
				.active{
					color: #fff;
					background-color: $color-red;
				}
				.blue.active{
					background-color: $color-blue;
				}
			}
		}
		.dog{
			width: 100%;
			padding: 5px;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 220px;height:80px;
				border-radius: 15px;
				background-color: rgba(160,160,160,0.3);
				border: 5px double rgba(160,160,160,0.3);
				margin: 9px;
				.db-t{
					font-size: 24px;
					font-weight: 900;
				}
				.db-p{
					color: #aaa;
					font-size: 14px;
				}
			}
			.btn.row{
				width: 75px;height:75px;
				border-radius: 50%;
				margin: 0 8px;
				background-color: rgba(160,160,160,0.5);
				.db-t{
					font-size: 18px;
					font-weight: 900;
				}
			}
			.btn.b1{
				color: $color-ored;
			}
			.btn.b2{
				color: $color-yellow;
			}
			.btn.b3{
				color: $color-blue;
			}
			.btn.active{
				color: #eee;
				.db-p{
					color: #eee;
				}
			}
			.b1.active{
				background-color: $color-ored-light;
			}
			.b2.active{
				background-color: $color-yellow-light;
			}
			.b3.active{
				background-color: $color-blue-light;
			}
			.btn.single{
				width: 150px;height:50px; 
				margin: 3px;
				border: 0;
				border-radius: 50px;
				background-color: $color-green;
				.db-t{
					color: #fff;
				}
			}
		}
	}
	.yyy{
		// width: 330px;height:330px;
		width: 100%;height:calc(100vh);
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgba(99,99,99,0.3);
		position: relative;
		.result{
			width: auto;height: auto;
			margin: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			padding: 20px;
			border-radius: 10px;
			.tip{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				font-size: 20px;
				padding: 15px;
				.img{
					width: 35px;height: 35px;
					border-radius: 50%;
					margin: 0 3px;
				}
			}
			.list{
				padding: 10px;
				.item{
					display: flex;
					flex-direction: row;
					.item-c{
						.ball{
							width: 35px;height: 35px;
							display: inline-block;
							margin: 3px;
							padding: 8px;
							box-sizing: border-box;
							background-color: #eee;
							color: #fff;
							border-radius: 50%;
						}
						.ball.red{
							background-color: $color-red;
						}
						.ball.blue{
							background-color: $color-blue;
						}
					}
				}
				.btn-share{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					width: 80%;height: auto;
					margin: auto;
					margin-top: 20px;
					padding:8px;
					background-color: $color-green;
					color: #fff;
					border-radius: 5px;
					font-size: 18px;
				}
			}
		}
		.img{
			width: 320px;height: 320px;
			background-image: url("");
			background-size: 100% 100%;
			// background-size: cover;
			// background-repeat: no-repeat;
			// background-attachment: fixed;  /*关键*/
			// background-position: center;
			border: 1px solid $color-red;
			.gif{
				width: 200px;height: 200px;
				// border-radius: 50%;
			}
		}
	}
	// ssqlist
	.ssq-list{
		width: 100%;height: calc(100vh - 68px);
		background-color: rgba(256,256,256,0.9);
		.item{
			display: block;
			width: 100%;
			padding:  10px 20px;
			text-align: center;
			.term,.ball{
				width: auto;
				margin: auto;
				padding: 5px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.term{
				.tip{
					width: auto;
					color: #999;
					font-weight: 900;
				}
			}
			.ball{
				color: #fff;
				.red,.blue{
					display: inline-block;
					text-align: left;
					width: 35px;height: 35px;
					box-sizing: border-box;
					padding-top: 5px;padding-left: 5px;
					border-radius: 50%;
					background-color: $color-red;
					font-style: italic;
					font-weight: 900;
					// text-shadow: 1px 1px 1px #999;
				}
				.blue{
					background-color: $color-blue;
				}
			}
		}
		.item:nth-child(odd) {
			background-color: $color-modal;
		}
	}
}
// 微信界面
.wx-main{
	background-color: rgb(181,229,29);
	width: 100%;height:calc(100vh);
	.wx-title{
		position: fixed;
		top: 35px;left: 10px;
		color: rgb(254,254,128);
		font-weight: 900;
	}
	.number{
		width: 100%;height: calc(100vh - 100px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
		.item{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.inner{
				font-size: 24px;
				font-weight: 900;
				color: rgb(254,254,128);
				padding: 10px;
			}
		}
		.copy-btn{
			background-color: rgb(254,254,128);
			color: rgb(181,229,29);
			padding: 10px 20px;
			border-radius: 5px;
		}
	}
	.bar{
		width: 100%;height: 100px;
		padding: 0 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		.btn{
			width: 30%;height: 80%;
			border: 1px solid rgba(0,0,0,0);
			background-color: rgb(254,254,128);
			color: rgb(181,229,29);
			font-size: 18px;
			font-weight: 900;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px 15px;
			box-sizing: border-box;
			text-align: center;
			border-radius: 5px;
		}
	}
}
